<template>
  <div>
    <h3 v-if="user_name">{{user_name}}的分享</h3>
    <div class="card" v-for="item in moments">
      <Momment :moment="item"></Momment>
      <MommentOption :id="item.id" :item="item"
                     @Collection=""
                     @Repost=""
                     @Comment=""
                     @Like=""
      ></MommentOption>
    </div>
  </div>
</template>
<script>
  /* eslint-disable spaced-comment */

  import Momment from '@/components/post/moment'
  import MommentOption from '@/components/post/moment-option'
  import { getPost } from '@/public/api'

  export default {
    components: {Momment, MommentOption},
    data () {
      return {
        moments: [],
        user_id: '',
        user_name: ''
      }
    },
    methods: {
      getContent () {
        getPost({
          group_id: this.group_id
        }).then(
          data => {
            if (data.status) {
              this.user_name = (data.user.user_id === Number(this.User_id)) ? '我' : this.user_name = data.user.name
              let arr = data.data
              this.moments.length = 0
              console.log(arr)
              for (let i = 0; i < arr.length; i++) {
                let post = {
                  id: arr[i].id,
                  Images: arr[i].images,
                  content: arr[i].content,
                  group_id: arr[i].group_id,
                  group_name: data.group.name || '默认',
                  update_time: arr[i].created_at,
                  user_id: arr[i].user_id,
                  name: arr[i].userbasic.name,
                  avatar: data.group.avatar,
                  vote: arr[i].vote.some((item, index, array) => {
                    return item.user_id + '' === this.User_id
                  }),
                  vote_size: arr[i].vote.length
                }
                this.moments.push(post)
              }
              this.user_name = data.group_name
            }
          }
        ).catch(
          message => {
            this.$message.error(`错误`)
          }
        )
      }
    },
    mounted () {
      this.group_id = this.$route.params.role
      this.getContent()
    },
    watch: {
      User_id (curVal, oldVal) {
        this.getContent()
      },
      $route () {
        this.user_id = this.$route.params.role
        this.getContent()
      }
    }

    /*computed: {
      User_id () {
        return this.$store.state.user_id
      }
    }*/
  }
</script>
<style>
  .card {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    background: #fff;
    text-align: left;
  }

  h3 {
    text-align: center;
  }
</style>
